<!DOCTYPE html>
<html lang="en">
<head>
    #include("../include/header.html")
</head>
<body>

<div class="container">
    #include("../include/menu.html")

    <!-- 工具栏 -->
    <div class="row" style="margin-bottom: 10px">
        <div class="col-sm-12">
            <div class="pull-left">
                <!-- 增加按钮 -->
                <button class="btn btn-primary btn-sm " data-toggle="tooltip" data-placement="left"
                        onclick="addRowByTableId('paginationTable')" title="新增"><i class="glyphicon glyphicon-plus"></i>
                    新增
                </button>

                <!-- 增加按钮 -->
                <button class="btn btn-primary btn-sm "
                        id="refreshTableBtn"
                        data-placement="left"
                        title="刷新"><i class="glyphicon glyphicon-repeat"></i> 刷新
                </button>

                <button class="btn btn-primary btn-sm "
                        data-toggle="tooltip" data-placement="left" id="treeTableSaveBtn"
                        title="保存"><i class="glyphicon glyphicon-floppy-disk"></i> 保存
                </button>

                <script type="text/javascript">
                    function add() {
                        window.location = pathPrefix + "/form";
                    }

                    function refresh() {//刷新
                        window.location = pathPrefix;
                    }
                </script>

            </div>
        </div>
    </div>

    <div class="row">
        <table id="paginationTable" class="table-hover"></table>
    </div>
</div>

#include("../include/footer.html")
<script src="/static/commons/myTreeEditableTable.js"></script>
<script>
    function newTableRow() {
        return new Resource();
    }

    var tableParams = {
        tableId: 'paginationTable',
        delRowAjaxUrl: pathPrefix + '/delete',
        addRowAjaxUrl: pathPrefix + '/form',
        saveRowAjaxUrl: pathPrefix + '/form',
        getDataAjaxUrl: pathPrefix + '/getListAll',
        saveTableDataAjaxUrl: pathPrefix + "/saveAll",
        tableColumns: [
            {
                field: 'operator', title: '', width: '80px', formatter: function (value, row, index) {
                    var arr = [];
                    var del = '<button onclick="delRowByBtn(this);" data-id="' + row.id + '" class="btn btn-danger btn-xs"><i class="fa fa-minus" aria-hidden="true"></i></button>';
                    var add = '<button onclick="addRowByBtn(this);" data-id="' + row.id + '" class="btn btn-primary btn-xs"><i class="fa fa-plus" aria-hidden="true"></i></button>';

                    // arr.push(view);
                    arr.push(del);
                    arr.push(' ');
                    arr.push(add);
                    return arr.join('');

                }
            },
            {
                field: 'name', title: '字段名',
                editable: {
                    type: 'text',
                    title: '字段名',
                    mode: "inline",
                    showbuttons: false,
                    validate: function (v) {
                        if (!v) return '字段名不能为空';

                    }
                }
            },
            {
                field: 'type', title: 'type',
                editable: {
                    type: 'select',
                    title: 'type',
                    mode: "inline",
                    showbuttons: false,
                    source: [{value: "menu", text: "menu"}, {value: "button", text: "button"}]
                }
            },
            {
                field: 'url', title: 'url',
                editable: {
                    type: 'text',
                    title: 'url',
                    mode: "inline",
                    showbuttons: false,
                }
            },
            {
                field: 'permission', title: '权限串',
                editable: {
                    type: 'text',
                    title: 'permission',
                    mode: "inline",
                    showbuttons: false,
                }
            },
            {
                field: 'available', title: 'available',
                editable: {
                    type: 'select',
                    title: 'available',
                    mode: "inline",
                    showbuttons: false,
                    source: [{value: "1", text: "可用"}, {value: "0", text: "不可用"}],
                },
                formatter: function (value, row, index) {
                    return value ? '1' : '0';
                }
            },

        ],
    };

    class Resource {
        constructor() {
            this.id = Date.parse(new Date());
            this.pid = 0;
            this.name = 'new Item';
            this.type = 'menu';
            this.url = '';
            this.permission = '';
            this.available = 1;
        }
    }

    $(function () {
        initTableByAjax(tableParams);
    });


</script>
</body>
</html>